<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>时钟</title>
</head>
<style>
    div {
        text-align: center;
        margin-top: 150px;
    }
</style>

<body>
    <div>
        <canvas id="clock" width="500px" height="500px"></canvas>
    </div>
    <script>
        let dom = document.getElementById('clock');//获取画布
        let ctx = dom.getContext('2d'); //获取canvas上下文 
        let width = ctx.canvas.width;//获取预先设置的canvas画布宽度
        let height = ctx.canvas.height; //获取预先设置的canvas画布高度
        var r = width / 2;//定义半径，为后续绘制圆形图案做准备
        //为了宽度高度放大是时，其他边框等比美观，所以设置一个比例
        var rem = width / 200;
        var img = new Image();
        img.src = "http://img.ldnkj.com/upload/20190507/c29231b63fde45088872abfdc0081fd4.jpg";
        ctx.drawImage(img, 40, 40, 420, 420);
        function drawBackground() {
            ctx.save();//每次开始前都要保存当前画布状态，以免移动画布影响后续绘制
            ctx.translate(r, r); //将起始点位置移动至圆心
            ctx.beginPath();  //每次开始前必须开始一条路径
            //按比例输出边框宽度，width/200=x/10=rem; 即 x=10 *rem
            ctx.lineWidth = 10 * rem; //设置绘制线的宽度
            ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false);//画一个整圆

            ctx.stroke(); //对圆进行描边

            var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];//定义标记小时的数组
            hourNumbers.map(function (number, i) {//遍历 取出各刻度及所在索引
                var rad = 2 * Math.PI / 12 * i;//每个刻度所占弧度为索引乘以一小时的弧度，即 1点钟30度，2点钟60度，以此类推..
                var x = Math.cos(rad) * (r - 30 * rem);
                var y = Math.sin(rad) * (r - 30 * rem);//确定各刻度点 X、Y坐标 
                ctx.textAlign = 'center';//绘制的刻度在整个画布左右居中 
                ctx.textBaseline = 'middle';//同理，上下居中 
                ctx.font = 18 * rem + "px Arial";//设置显示刻度的数字 1,2,3.. 的字体及字号 
                ctx.fillText(number, x, y)//绘制文字
            });

            for (var i = 0; i < 60; i++) {
                var rad = 2 * Math.PI / 60 * i;
                var x = Math.cos(rad) * (r - 18 * rem);
                var y = Math.sin(rad) * (r - 18 * rem);
                ctx.beginPath();
                if (i % 5 === 0) {
                    ctx.fillStyle = '#000';
                } else {
                    ctx.fillStyle = '#ccc';
                }
                ctx.arc(x, y, 2 * rem, 2 * Math.PI, false);
                ctx.fill();
            }  
        }

        function drawHour(hour, minute) {
            ctx.save();//存储画布状态
            ctx.beginPath();//开始一条路径
            var rad = 2 * Math.PI / 12 * hour;//时钟一圈共有12个小时，那个每小时所占的弧度
            var mrad = 2 * Math.PI / 12 / 60 * minute;//时钟一圈共有60的分钟，那么每分钟所占的弧度
            ctx.rotate(rad + mrad);
            ctx.lineWidth = 6 * rem;
            ctx.moveTo(0, 10 * rem);//移动起始点至（0,10） 
            ctx.lineTo(0, -r / 2);//从起始点绘制到（0，r/2）点，负号表示方向向上
            ctx.lineCap = 'round';//设置结束线帽
            ctx.stroke(); //描边
            ctx.restore(); //将画布恢复到旋转之前状态
        }

        function drawMinute(minute) {
            ctx.save();
            ctx.beginPath();
            var rad = 2 * Math.PI / 60 * minute;
            ctx.rotate(rad);
            ctx.lineWidth = 3 * rem;
            ctx.moveTo(0, 10 * rem);
            ctx.lineTo(0, -r / 2 - 10);
            ctx.lineCap = 'round';
            ctx.stroke();
            ctx.restore();
        }

        function drawSecond(second) {
            ctx.save();
            ctx.beginPath();//起始一条路径，或重置当前路径
            var rad = 2 * Math.PI / 60 * second;
            ctx.rotate(rad);//旋转当前绘图
            ctx.lineWidth = 3;
            ctx.moveTo(-2 * rem, 20 * rem);//把路径移动到画布中的指定点，不创建线条
            ctx.lineTo(2 * rem, 20 * rem);
            ctx.lineTo(1, -r + 18 * rem);
            ctx.lineTo(1, -r + 18 * rem);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
            ctx.fillStyle = '#e4393c';
            ctx.fill();//填充当前绘图（路径）
            ctx.restore();//返回之前保存过的路径状态和属性
        }

        function drawDot() {
            ctx.beginPath();
            ctx.fillStyle = '#fff';
            ctx.arc(0, 0, 3 * rem, 2 * Math.PI, false);//创建圆
            ctx.fill();
        }

        function draw() {
            ctx.clearRect(0, 0, width, height);//在给定的矩形内清除指定的像素（重新绘制之前清除画布，否则状态叠加，）
            var now = new Date();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            // 绘制表盘背景
            var img = new Image();
            img.src = "http://img.ldnkj.com/upload/20190507/c29231b63fde45088872abfdc0081fd4.jpg";
            ctx.drawImage(img, 40, 40, 420, 420);
            drawBackground(); //绘制圆盘背景
            drawHour(hour, minute);//绘制时针
            drawMinute(minute);//绘制分针
            drawSecond(second);//绘制秒针
            drawDot();//绘制原点
            ctx.restore(); //回复画布状态
        }
        setInterval(draw, 1000);//定时器执行整个绘画方法


    </script>
</body>

</html>